<template>
  <div>
    <scroller :show-scrollbar="false">
      <text class="bg-white p-3">单号: {{ship.ship_p_id}}</text>
      <div class="flex-row-wp">
        <text class="dt">客户:</text>
        <text class="dd">{{servicer.service_name}}</text>
      </div>
      <div class="flex-row-wp">
        <text class="dt">联系人:</text>
        <text class="dd">{{servicer.res_person_name}}</text>
      </div>
      <div class="flex-row-wp">
        <text class="dt">联系电话:</text>
        <text class="dd">{{servicer.res_phone_number}}</text>
      </div>
      <div class="flex-row-wp">
        <text class="dt">客户地址:</text>
        <text class="dd">{{servicer.address}}</text>
      </div>
      <div class="flex-row-wp">
        <text class="dt">{{+ship.ship_status === 2?'退货':'到货'}}时间:</text>
        <text class="dd">{{ship.confirmTime}}</text>
      </div>
      <div class="flex-row-wp">
        <text class="dt">收货状态:</text>
        <text class="dd"
              :class="[ship.shipStatusStyle]">{{ship.shipStatus}}</text>
      </div>

      <div class="p-title">
        <text>农产品</text>
        <div class="flex-row-e">
          <text class="small text-muted">共 {{shipDetail.length}} 个, 合计 </text>
          <text class="text-error">{{ship.total_amount}}</text>
          <text class="small text-muted"> 元</text>
        </div>
      </div>

      <div class="flex-row bg-white"
           v-for="(item, index) in shipDetail"
           :key="index">
        <text class="p-serial">{{index + 1}}</text>
        <div class="p-content">
          <div class="flex">
            <text class="text">{{item.product_name}}</text>
            <text class="small text-muted">规格: {{item.spec_name}}</text>
          </div>
          <div class="align-right">
            <text class="text">&yen; {{item.item_total}}</text>
            <text class="small text-muted">单价: {{item.unit_price}}</text>
            <text class="small text-muted">数量: {{item.ship_p_num}}{{item.unit}}</text>
          </div>
        </div>
      </div>
    </scroller>

  </div>
</template>
<script>
import {
  enumShipStatus,
  enumShipStatusStyle
} from '../../plugins/enumChick'

export default {
  components: {},
  props: {},
  data() {
    return {
      ship: {},
      shipDetail: [],
      servicer: {}
    }
  },
  computed: {

  },
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    async getParams() {
      const res = await this.$router.getParams()
      this.ship = res && res.data || {}
      if (!this.ship.ship_p_id) {
        return this.$notice.toast({ message: '获取出库单失败' })
      }
      this.ship.confirmTime = this.ship.confirm_time ? this.ship.confirm_time.substr(0, 10) : ''
      this.ship.shipStatus = enumShipStatus[this.ship.ship_status] || '其他'
      this.ship.shipStatusStyle = enumShipStatusStyle[this.ship.ship_status] || ''
      this.getServicer()
      this.getShipDetail()
    },
    async getShipDetail() {
      const res = await this.$api.getData({
        server: 'agr_chain',
        table: 'ship_p_form_detail',
        params: {
          'ship_p_id.eq': this.ship.ship_p_id
        },
        order: { order_num: 'asc' }
      })
      const data = res || []
      this.shipDetail = data.map(item => {
        item.item_total = this.pureDot(item.item_total)
        item.unit_price = this.pureDot(item.unit_price)
        item.ship_p_num = this.pureDot(item.ship_p_num)
        return item
      })
    },
    getServicer() {
      this.$api.getData({
        server: 'agr_chain',
        table: 'supplier_related_view_for_app',
        params: {
          'supplier_id.eq': this.ship.supplier_id
        }
      }).then(res => {
        const data = res || []
        if (data.length) {
          this.servicer = data[0]
        }
      })
    },
    pureDot(num) {
      return num ? num.replace(/(?:\.0*|(\.\d+?)0+)$/g, '') : ''
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.bg-white {
  background-color: #fff;
}
.p-3 {
  padding: 30px;
}
.pt-3 {
  padding-top: 30px;
}
.pb-3 {
  padding-bottom: 30px;
}
.px-3 {
  padding-left: 30px;
  padding-right: 30px;
}
.py-1 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mt-3 {
  margin-top: 30px;
}
.mt-1 {
  margin-top: 10px;
}
.mr-3 {
  margin-right: 30px;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.justify-end {
  justify-content: flex-end;
}
.align-center {
  align-items: center;
}
.align-right {
  align-items: flex-end;
}
.small {
  font-size: 26px;
}
.mini {
  font-size: 22px;
}
.text-muted {
  color: #999;
}
.text-error {
  color: $error;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.text {
  font-size: 28px;
}
.text-right {
  text-align: right;
}
.text-info {
  color: $info;
}
.text-success {
  color: $success;
}
.text-error {
  color: $error;
}

.flex-row-e {
  flex-direction: row;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-end;
}
.flex-row-wp {
  flex-direction: row;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
}
.dt {
  width: 160px;
  font-size: 26px;
  color: #666;
}
.dd {
  flex: 1;
  font-size: 26px;
}
.p-title {
  flex-direction: row;
  padding: 30px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
  margin-top: 10px;
}
.p-serial {
  padding: 10px;
  width: 80px;
  color: #999;
  text-align: center;
  font-size: 26px;
}
.p-content {
  flex-direction: row;
  flex: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 30px;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}

.btn {
  padding-left: 30px;
  padding-right: 30px;
  border-width: 1px;
  height: 56px;
  line-height: 56px;
  border-radius: 6px;
}
.btn-primary {
  background-color: $primary;
  border-color: $primary;
  color: #fff;
}
.btn-error-outline {
  background-color: #fff;
  border-color: $error;
  color: $error;
}
</style>
